<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/global.js"></script>
</head>
<style>

</style>
<body>

<!-- 样式 -->
<fieldset style="margin-top: 10px;" class="layui-elem-field layui-field-title">
    <legend>分类模块维护</legend>
</fieldset>
<div class="layui-container">
    <div class="layui-row">
        <!-- 树节点 -->
        <div class="layui-col-md3">
            <div id="catalogTree" class="demo-tree demo-tree-box" style="width: 100%; height: 100%;"></div>
        </div>
        <div class="layui-col-md9">
            <div id="modulesDivB">
                <button id="btnaddChild" class="layui-btn layui-btn-sm">添加子节点</button>
                <button id="btnaddparentid" class="layui-btn layui-btn-sm">添加父节点</button>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend>
                        <span id="spTitle">分类模块信息管理</span>
                    </legend>
                </fieldset>
                <form id="saveForm" class="layui-form" lay-filter="categoryForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">父节点编号</label>
                        <div class="layui-input-block">
                            <input id="textParentId" name="parent_cid" disabled="disabled" placeholder="请输入父节点编号" type="text" value="0" class="layui-input" />

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">节点编号</label>
                        <div class="layui-input-block">
                            <input id="txtId" type="text" name="cat_id" placeholder="请输入节点编号" disabled="disabled" value="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">节点名称</label>
                        <div class="layui-input-block">
                            <input id="txtName" type="text"  name="name" lay-verify="required" autocomplete="off"
                                   placeholder="请输入节点名称" class="layui-input">
                        </div>
                    </div>
                    <!-- 层级 -->
                    <div class="layui-form-item">
                        <input type="text" style="display: none" value="1" name="cat_level" id="cat_level">
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            <input type="radio" name="show_status" value="0" title="不显示">
                            <input type="radio" name="show_status" value="1" title="显示" checked>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">图标</label>
                        <div class="layui-input-block">
                            <input name="icon" type="text"  autocomplete="off" placeholder="请选择图标"
                                   class="layui-input">
                        </div>
                    </div>

                    <div id="icondiv" style="display: none;" class="layui-form-item">

                        <label class="layui-form-label">图标</label>
                        <div class="layui-input-block">
                            <i id="icon" class="layui-icon"></i>
                            <xmp style="display: none;" id="iconxmp"></xmp>
                            <button style="display: none;" class="layui-btn layui-btn-danger layui-btn-sm" id="addicon">查看图标</button>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="button" class="layui-btn" id="adbtn" lay-submit lay-filter="subData" value="添加" />
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                    <span id="jw">分类模块信息维护</span>

                </form>

            </div>

        </div>
    </div>

</div>

</body>
<script>
    layui.use(['layer','form','tree'],function () {
        let tree = layui.tree;
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;
        $(function (){
            $.ajax({
                type:'get',
                url:glodate.serverZuul+'category/getTree',
                dataType:"json",
                success:function (res){
                    console.log(res);
                    tree.render({
                        elem:'#catalogTree',
                        data:res.data,
                        edit:['del'],
                        id:'treerenderId',
                        click:function (obj){
                            let data=obj.data; //得到当前点击的节点数据
                            //   console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                            //  console.log(obj.elem); //得到当前节点元素
                            //点击数节点的时候每次都发一个请求来查看当前分类下的分组
                            form.val('categoryForm',data)
                            $('#txtId').val(data.id);
                            $('#txtName').val(data.title);
                            $('#spTitle').html("正在对"+data.title+"进行修改操作")
                            $('#adbtn').val("修改");//修改按钮为修改
                            $('#btnaddChild').removeAttr("disabled");//移除添加子节点的禁用属性
                           //  console.log(data);
                        },operate:function (obj){
                            var type = obj.type; //得到操作类型：add、edit、del
                            var data = obj.data; //得到当前节点的数据
                            var elem = obj.elem; //得到当前节点元素
                          //  tree.reload('treerenderId', {}); //防止layui源码自动删除节点
                            if(type==='del'){
                                //删除操作
                              console.log(data.id);
                                tree.reload('treerenderId', {}); //防止layui源码自动删除节点
                              $.ajax({
                                  url:glodate.serverZuul+"category/delCategoryByCatelogId",
                                  method:'delete',
                                  data:{'catelogId':data.id},
                                  dataType:'json',
                                  success:function (res){
                                      if(res.code==200){
                                          layer.msg('删除成功', {
                                              icon: 1,
                                              time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                          }, function(){
                                             location.reload()
                                              //do something
                                          });
                                      }else if(res.code==500){
                                          Swal.fire({
                                              title:'删除失败',
                                              text:res.msg,
                                              icon:'error'
                                          }).then((x)=>{
                                              location.reload()
                                          })

                                      }else{
                                          Swal.fire({
                                              title:'服务器在开小差',
                                              text:'请稍后再试',
                                              icon:'warning',
                                          }).then((x)=>{
                                              location.reload()
                                          })
                                      }
                                  }
                              })

                            }
                        }
                    })
                }
            })

        })
        //点击添加子节点按钮
        $('#btnaddChild').on('click',function (){
            let cat_level= $('#cat_level').val();
            let spTitle=$('#spTitle').html();
                $('#btnaddChild').attr("disabled","disabled");//禁用当前子节点按钮
            if(cat_level!=3){
                //添加第二层或者第三层分类
                $('#spTitle').html(spTitle.replace('修改','添加子类'))
                $('#textParentId').val($('#txtId').val());//修改父id
                $('#txtId').val("");//设置节点为null
                //如果给第二层添加子类，则这个必须为3，要是第一层添加子类，则必须为2
                if(cat_level==2){
                    cat_level=3;
                }else if(cat_level==1){
                    cat_level=2;
                }
                $('#cat_level').val(cat_level);//设置分层值
                $('#adbtn').val("添加");
            }else{
                //选择为三级分类添加
                Swal.fire({
                    title:'不可这样选择',
                    text:'您不可以为第三层分类添加子类',
                    icon:'error'
                })
            }
            return false;
        })
        //添加或者修改

        form.on('submit(subData)',function (){
            let adbtn=$('#adbtn').val();//当前按钮的值，来判断是添加还是修改
           //点击添加
            if(adbtn=="添加"){
                $.ajax({
                    url:glodate.serverZuul+"category/addCategory",
                    method:'post',
                    data:form.val("categoryForm"),
                    dataType:'json',
                    success:function (res){
                        if(res.code==200){
                            Swal.fire({
                                title:res.msg,
                                text:'添加成功,点击确定会重新加载页面',
                                icon:'success',
                                confirmButtonColor: '#14e0e0',
                                confirmButtonText: '确定',
                            }).then((x)=>{

                                if(x){
                                    console.log(x);
                                    location.reload()
                                }
                            })
                        }else{
                            layer.msg(res.msg);
                        }
                    }
                })
            }else{
         //进行修改
                $.ajax({
                    url:glodate.serverZuul+"category/updateCategory",
                    method:'put',
                    data:form.val("categoryForm"),
                    dataType:'json',
                    success:function (res){
                        if(res.code==200){
                            Swal.fire({
                                title:res.msg,
                                text:'修改成功,点击确定会重新加载页面',
                                icon:'success',
                                confirmButtonColor: '#14e0e0',
                                confirmButtonText: '确定',
                            }).then((x)=>{
                                if(x){
                                    console.log(x);
                                    location.reload()
                                }
                            })
                        }else{
                            Swal.fire({
                                title:res.msg,
                                icon:'error'
                            })
                        }
                    }
                })
            }

            return false;
        })
        //添加父节点
    $('#btnaddparentid').on('click',function (){

        $('#spTitle').html('正在进行添加父模块操作');
     $('#cat_level').val(1);//层级
     $('#textParentId').val(0);//父编号为0
         $('#txtId').val(0);//编号为0
        $('#txtName').val("");//设置名字为null
        return false;
    })


    })

</script>
</html>